<template>
  <div class="manageContent">
    <el-tabs tab-position="top" class="demo-tabs" v-model="activeName">
      <el-tab-pane label="密码修改" name="first">
        <div class="layClass">
          <div class="content">
            <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              status-icon
              :rules="rules"
              label-position="right"
              class="demo-ruleForm"
              label-width="150px"
            >
              <el-form-item label="用户名" prop="userName">
                <el-input
                  v-model="ruleForm.userName"
                  class="w-50 m-2"
                  size="large"
                  placeholder="请输入用户名"
                >
                </el-input>
              </el-form-item>
              <el-form-item label="密码" prop="pass">
                <el-input
                  v-model="ruleForm.pass"
                  class="w-50 m-2"
                  size="large"
                  placeholder="请输入密码"
                  show-password
                >
                </el-input>
              </el-form-item>
              <el-form-item label="确认密码" prop="comfirmPass">
                <el-input
                  v-model="ruleForm.comfirmPass"
                  class="w-50 m-2"
                  size="large"
                  placeholder="请再次输入密码"
                  show-password
                >
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  style="width: 100%"
                  type="primary"
                  @click="submitForm(ruleFormRef)"
                  >提交</el-button
                >
              </el-form-item>
            </el-form>
          </div>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import type { FormInstance, FormRules } from "element-plus";

const activeName = ref("first");
const ruleFormRef = ref<FormInstance>();
const ruleForm = reactive({
  userName: "admin",
  pass: "123",
  checked: false,
  comfirmPass: "",
});
const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
    }
  });
};
const rules = reactive<FormRules<typeof ruleForm>>({
  pass: [{ required: true, message: "请输入密码" }],
  userName: [{ required: true, message: "请输入用户名" }],
  comfirmPass: [{ required: true, message: "确认密码" }],
});
</script>

<style scoped lang="scss">
.manageContent {
  position: relative;
  width: 100%;
  height: 100%;
}
.layClass {
  margin-top: 200px;
  display: flex;
  justify-content: center;
}
.content {
  width: 500px;
}
</style>
